import React,{use, useEffect, useState} from 'react'
import { Avatar, Button, Input, List, message } from 'antd';
import {
  sendCommentsApi
} from '@/api/requestApi'
const  NewsComments = ({comments,articleId,getArticleDetailById})=> {
  console.log(comments,'comments')

  const [comment, setComment] = useState('')  // 存储评论内容
  const [replyContent,setReplyContent] = useState('') // 存储回复内容
  const [isShowReply,setIsShowReply] = useState({}) // 通过保存当前评论的id控制回复框的显示和隐藏

  const toggleReply = (commentId)=>{

    setIsShowReply(pre=>({
      // console.log(pre,'pre')
      // console.log(!pre[commentId],'commentId')
        ...pre,
        [commentId]:!pre[commentId]  // 强制类型转换  true/false
    }))
  }


  // 回复评论操作
  const handleReplySubmit = async (commentId)=>{
    if(!replyContent){
      message.error('回复内容不能为空')
      return 
    }
    const res = await sendCommentsApi({
      userId:47529555,  // 用户id 
      content:replyContent, // 回复内容
      articleId,  // 文章id
      commentId // 评论id
    })
    console.log(res,'回复评论的结果')
    if(res && res.status === 200){
      message.success('回复成功')
      // 刷新文章详情
      getArticleDetailById(articleId)
      // // 清空输入框
      setReplyContent('')
      // // 关闭回复框
      toggleReply(commentId)
    }

  }

  // 发表评论
  const handleSubmit = async ()=>{
    // 非空判断 comment 存储输入框内容的数据
    if(!comment){ 
      message.error('评论内容不能为空')
      return
    }

    // 发表评论需要三个参数  1.用户id(写死) ,评论内容(comment), 文章id()
    const res = await sendCommentsApi({
      userId:47529555,  // 用户id 
      content:comment, // 评论内容
      articleId  // 文章id
    })

    // console.log(res,'评论返回值')
    if(res && res.status === 200){
      message.success('评论成功')
      // 重新获取文章详情,数据会进行重新回显
      getArticleDetailById(articleId)
      setComment('') // 清空评论输入框
    }


  }


  return (
    <div>
      <List
        itemLayout="horizontal"
        dataSource={comments}  // 父组件传递过来的评论列表
        locale={{
          emptyText:"暂无评论..."   // 设置没有数据时,列表默认显示的文本
        }}
        renderItem={(item, index) => (  // 做数据渲染
          <List.Item>
            <List.Item.Meta
              key={item.id}
              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={  // 评论的作者
                <div>
                  <span>评论作者：{item.user.username}</span>
                </div>
              }
              description={  // 具体评论的内容   时间  以及回复评论的结构
                <div>
                 <div>
                  <p>评论内容：{item.content}</p>
                  <p>
                    评论时间：{item.createdAt}
                    <Button type="link" onClick={()=>toggleReply(item.id)}>{isShowReply[item.id] ? '取消回复' : '回复'}</Button>
                  </p>
                  {/* 回显回复的内容 */}
                  {item.replies.map(value=>(
                   <div key={value.id}>
                    <p>回复的内容：{value.content} | 回复的时间：{value.createdAt} | 回复的用户：{value.user.username}</p>
                 </div>
                  ))}
                 {isShowReply[item.id] && (
                   <div>
                   <Input.TextArea
                    placeholder='请输入回复内容...'
                    rows={3}
                    value={replyContent}
                    onChange={(e)=>{
                      setReplyContent(e.target.value)
                    }}
                  ></Input.TextArea>
                  <Button  style={{marginTop:"20px"}} type="primary" onClick={()=>handleReplySubmit(item.id)}>回复</Button>
                  
                 </div>
                 )}
                 </div>
                  
                </div>
                
              }
            />
          </List.Item>
        )}
      />
      {/* 这里是发表评论的输入框 */}
      <div>
        <Input.TextArea
          placeholder='请输入评论内容...'
          rows={3}
          value={comment}  // 绑定value的目的是为了后期发表评论之后清空输入框内容
          onChange={(e)=>{  // 输入框中的内容发生变化之后,触发这个方法,对输入框中的内容进行保存
            setComment(e.target.value)
          }}
        ></Input.TextArea>
        <Button  style={{marginTop:"20px"}} type="primary" onClick={handleSubmit}>发表评论</Button>
      </div>
    </div>
  )
}


export default NewsComments
